<template>
	<view class="more bgf7 page pt10">
		<view class="bgff cff py8 px10 mx10 rel c00">
			<view class="flex1 aliC flex flexC flexW fs13">
				<text >店铺选择</text>
				<view @click="showShop" class="shopBox flex flexC bor r5 ml16 pr6">
					<text class="flex1">{{selectShop.name}}</text>
					<image class="ml6 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
				<view class="fs13 ml18">
					总金额：{{total}}
				</view>
			</view>
			<view class="flex flexC fs13 my12 timeBox">
				<text>日期</text>
				<picker mode="date" @change="dateStartChange">
					<text class="time bor r5 mx12">{{startTime}}</text>
				</picker>
				<text>到</text>
				<picker mode="date" @change="dateEndChange">
					<text class="time bor r5 mx12">{{endTime}}</text>
				</picker>
			</view>
		</view>
		<scroll-view scroll-y class="list fs13">
			<view v-for="(item,index) in list" :key="index" class="flex flexC bgff px10 py16 mt12 mx10">
				<text class="flex1">{{item.create_time_txt}}</text>
				<text class="bold6">{{item.book_amount}}</text>
				<text class="arrowR ml2"></text>
			</view>
			<view class="py20"></view>
		</scroll-view>
		
		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime: '2024-03-01',
				endTime: '2024-03-01',
				shopList:[],
				selectShop: null,
				total:0,
				list:[]
				
			};
		},
		onLoad(option) {
			
			if(option.start){
				this.startTime = option.start;
				this.endTime = option.end;
			}
			this.getShopList();
			
		},
		methods: {
			dateStartChange(e) {
				this.startTime = e.detail.value;
				this.getData();
			},
			dateEndChange(e) {
				this.endTime = e.detail.value;
				this.getData();
				
			},
			
			onClose() {
				this.$refs.shopPicker.close();
			},
			showShop() {
				this.$refs.shopPicker.open();
			
			},
			
			getData(){
				let param = {
					shop_id: this.selectShop.id,
					startTime: this.startTime,
					endTime: this.endTime
				};
				let that = this;
				this.$api.shopDay(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.total = res.data.amount;
						that.list = res.data.list;
						
					} else {
				
					}
				})
			},
			
			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {
			
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {
							that.selectShop = that.shopList[0];
							that.getData();
						}
					} else {
			
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.more {
	.list {
		height: calc(100vh - 220rpx);
	}
	.w12 {
		width: 24rpx;
		height: 24rpx;
	}
	.timeBox {
		.time {
			width: 244rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			display: inline-block;
		}
	}
	
	.shopBox {
		min-width: 244rpx;
		height: 56rpx;
		line-height: 56rpx;
	}
}
</style>
